<template>
    <div class="ui-confirm">
        <ui-modal
            ref="modal"
            role="alertdialog"

            :dismiss-on="dismissOn"
            :dismissible="!loading"
            :title="title"
            :transition="transition"

            @close="onModalClose"
            @open="onModalOpen"
        >
            <div class="ui-confirm__message">
                <slot></slot>
            </div>

            <div class="ui-confirm__footer" slot="footer">
                <ui-button
                    ref="confirmButton"

                    :color="confirmButtonColor"
                    :icon="confirmButtonIcon"
                    :loading="loading"

                    @click="confirm"
                >{{ confirmButtonText }}</ui-button>

                <ui-button
                    ref="denyButton"

                    :disabled="loading"
                    :icon="denyButtonIcon"

                    @click="deny"
                >{{ denyButtonText }}</ui-button>
            </div>
        </ui-modal>
    </div>
</template>

<script>
import UiButton from './UiButton.vue';
import UiModal from './UiModal.vue';

import classlist from './helpers/classlist';

export default {
    name: 'ui-confirm',

    props: {
        title: {
            type: String,
            default: 'UiConfirm'
        },
        type: {
            type: String,
            default: 'primary' // any of the color prop values of UiButton
        },
        confirmButtonText: {
            type: String,
            default: 'OK'
        },
        confirmButtonIcon: String,
        denyButtonText: {
            type: String,
            default: 'Cancel'
        },
        denyButtonIcon: String,
        autofocus: {
            type: String,
            default: 'deny-button' // 'confirm-button', 'deny-button' or 'none'
        },
        closeOnConfirm: {
            type: Boolean,
            default: true
        },
        dismissOn: String,
        transition: String,
        loading: {
            type: Boolean,
            default: false
        }
    },

    computed: {
        confirmButtonColor() {
            const typeToColor = {
                default: 'default',
                primary: 'primary',
                accent: 'accent',
                success: 'green',
                warning: 'orange',
                danger: 'red'
            };

            return typeToColor[this.type];
        }
    },

    methods: {
        open() {
            this.$refs.modal.open();
        },

        close() {
            this.$refs.modal.close();
        },

        confirm() {
            this.$emit('confirm');

            if (this.closeOnConfirm) {
                this.$refs.modal.close();
            }
        },

        deny() {
            this.$refs.modal.close();
            this.$emit('deny');
        },

        onModalOpen() {
            let button;

            if (this.autofocus === 'confirm-button') {
                button = this.$refs.confirmButton.$el;
            } else if (this.autofocus === 'deny-button') {
                button = this.$refs.denyButton.$el;
            }

            if (button) {
                classlist.add(button, 'has-focus-ring');
                button.addEventListener('blur', this.removeAutoFocus);
                button.focus();
            }

            this.$emit('open');
        },

        onModalClose() {
            this.$emit('close');
        },

        removeAutoFocus() {
            let button;

            if (this.autofocus === 'confirm-button') {
                button = this.$refs.confirmButton.$el;
            } else if (this.autofocus === 'deny-button') {
                button = this.$refs.denyButton.$el;
            }

            if (button) {
                classlist.remove(button, 'has-focus-ring');

                // This listener should run only once
                button.removeEventListener('blur', this.removeAutoFocus);
            }
        }
    },

    components: {
        UiButton,
        UiModal
    }
};
</script>

<style lang="scss">
@import './styles/imports';

.ui-confirm__message {
    font-family: $font-stack;
    font-size: rem-calc(15px);
}

.ui-confirm__footer {
    display: flex;
}
</style>
